<template>
  <div id="discover">
    <div class="top">
      <a href="https://activity.m.duiba.com.cn/chome/index?from=login&spm=14695.1.1.1">
        <div class="topleft">
          <p>金币商城</p>
          <small>0元好物在这里</small>
          <h5>
            <img
              src="https://cube.elemecdn.com/8/38/9c9aea0e856149083d84af3444b78jpeg.jpeg?x-oss-process=image/format,webp"
              alt
            />
          </h5>
        </div>
      </a>
      <div class="topright">
        <router-link to>
          <div class="right_top">
            <p>推荐有奖</p>
            <h4>20元现金拿不停</h4>
            <h5>
              <img
                src="https://cube.elemecdn.com/5/72/7232274c3c1934861abb86ba32b7bjpeg.jpeg?x-oss-process=image/format,webp"
                alt
              />
            </h5>
          </div>
        </router-link>
        <router-link to>
          <div class="right_bottom">
            <p>周边优惠</p>
            <small>领取口碑好劵</small>
            <h5>
              <img
                src="https://cube.elemecdn.com/5/10/2351e989d4171479ba0d7b5c06053jpeg.jpeg?x-oss-process=image/format,webp"
                alt
              />
            </h5>
          </div>
        </router-link>
      </div>
    </div>

    <!-- 限时好礼 -->
    <div class="bottom">
      <h1>
        ——
        <van-icon name="underway" color="red" />限时好礼 ——
      </h1>
      <p>金币换豪礼</p>
      <a
        href="https://activity.m.duiba.com.cn/singleLottery/index?id=135164955453121&dbnewopen&from=login&spm=14695.1.1.1"
      >
        <div class="time">
          <div class="time1">
            <div class="timeimg">
              <img
                src=""
                alt
              />
              <small>限时抽奖</small>
            </div>
            <p>PS4抽奖</p>
            <h5>
              200金币
              <span>￥2200</span>
            </h5>
          </div>
          <div class="time1">
            <div class="timeimg">
              <img
                src=""
                alt
              />
              <small>限时抽奖</small>
            </div>
            <p>JBL耳机抽奖</p>
            <h5>
              200金币
              <span>￥599</span>
            </h5>
          </div>
          <div class="time1">
            <div class="timeimg">
              <img
                src=""
                alt
              />
              <small>限时抽奖</small>
            </div>
            <p>Beats头戴式耳机抽奖</p>
            <h5>
              150金币
              <span>￥759</span>
            </h5>
          </div>
        </div>
      </a>
      <a href="https://activity.m.duiba.com.cn/chome/index?from=login&spm=14695.1.1.1">
        <h2>
          查看更多
          <van-icon name="arrow" />
        </h2>
      </a>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
body {
  background-color: #b48484;
}
#discover {
  .top {
    border-width: 1px 0;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    background: #fff;
    flex-wrap: wrap;
    border-bottom: 10px solid #f5f5f5;
    padding: 20px;
    .topleft {
      p {
        color: rgb(255, 153, 0);
        line-height: 1.2;
        font-size: 0.3rem;
        margin-bottom: 0.16rem;
        margin-bottom: 1.6vw;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      small {
        line-height: 1.2;
        font-size: 0.25rem;
        color: #999;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      h5 {
        width: 75px;
        height: 75px;
        margin-top: 30px;
        margin-left: 80px;
      }
      img {
        width: 100%;
      }
    }
    .topright {
      margin-left: 20px;
      .right_top {
        width: 160px;
        p {
          color: rgb(27, 169, 225);
          line-height: 1.2;
          font-size: 0.3rem;
          margin-bottom: 0.16rem;
          margin-bottom: 1.6vw;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          float: left;
        }
        h4 {
          line-height: 1.2;
          font-size: 0.25rem;
          color: #999;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        h5 {
          width: 45px;
          height: 45px;
          img {
            width: 100%;
            height: 100%;
            margin-left: 100px;
          }
        }
      }
      .right_bottom {
        width: 160px;
        float: right;
        p {
          color: rgb(237, 102, 96);
          line-height: 1.2;
          font-size: 0.3rem;
          margin-bottom: 0.16rem;
          margin-bottom: 1.6vw;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        small {
          line-height: 1.2;
          font-size: 0.25rem;
          color: #999;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        h5 {
          width: 45px;
          height: 45px;
          img {
            width: 100%;
            height: 100%;
            margin-left: 100px;
          }
        }
      }
    }
  }

  .bottom {
    border-bottom: 120px solid #f5f5f5;
    h1 {
      padding-top: 5.2vw;
      text-align: center;
      font-size: 0.38rem;
      font-weight: 700;
      color: #333;
    }
    p {
      font-size: 0.23rem;
      color: #999;
      text-align: center;
      padding-bottom: 0.213333rem;
      padding-bottom: 2.133333vw;
    }
    .time {
      height: 190px;
      .time1 {
        width: 110px;
        height: 110px;
        float: left;
        padding: 5px;
        .timeimg {
          width: 110px;
          height: 110px;
          position: relative;
          img {
            width: 100%;
          }
          small {
            position: absolute;
            top: 0;
            left: 0;
            color: #fff;
            background: #413d3c;
            padding: 0.066667rem;
            padding: 0.666667vw;
          }
        }
        p {
          font-size: 0.3rem;
          height: 0.3rem;
          color: #333;
          margin-bottom: 0.133333rem;
          margin-bottom: 1.333333vw;
          overflow: hidden;
        }
        h5 {
          color: #ff5339;
          font-size: 0.3rem;
          font-weight: normal;
          text-align: center;
          span {
            font-size: 0.2rem;
            color: #aaa;
            display: inline-block;
            vertical-align: middle;
            text-decoration: line-through;
          }
        }
      }
    }
    h2 {
      text-align: center;
      font-size: 0.25rem;
      color: #999;
      padding: 0.4rem 0 0.48rem;
      font-weight: normal;
      padding: 4vw 0 4.8vw;
    }
  }
}
</style>